iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 8
1
Modern Web

Daily UI : 開發者版系列 第 8

Vuetify:Time is money

  • 分享至 

  • xImage
  •  

https://codepen.io/hereiscasio/pen/ZmYyYK?editors=1000

Used UI Component ( #2 )

#1 Toolbars #2 Button groups

UI 圖來源件

Discussion

除新元件外,今天比較特別的地方有 2( 但其實仔細去看程式碼不難 ),此處要給出的概念就是:活用 FCC

  • A. Nested Cards
  • B. Nested Grids
// toolbar in outer card 
<v-toolbar flat color='transparent' class="pt-2 pl-2 ma-2">
    <v-app-bar-nav-icon class='opactiy-5'></v-app-bar-nav-icon>
</v-toolbar>

首先 v-toolbar 不是非得放在 v-card 裡,甚至也不一定要使用 v-toolbar,直接在 v-card-title 中塞漢堡圖標並調整 styling 也能達成相同目的,此處特點在於漢堡圖標因為太常用,已經被 Vuetify 規格化了:v-app-bar-nav-icon,但事實上你也可寫成:<v-btn icon><v-icon v-text='menu'></v-icon></v-btn>。至於 flat 是移除預設的隱影。

// toolbar in inner card
<v-toolbar color="transparent" class="mb-2">
    <v-btn-toggle v-model="toggle_none" id='panel-controller'>
        <v-btn text icon>
            <v-icon>pause</v-icon>
        </v-btn>
        <v-btn text icon>
            <v-icon>stop</v-icon>
        </v-btn>
    </v-btn-toggle>        
    <v-spacer></v-spacer>
    <span class="grey--text">CURRENT SESSION: 1:48:09</span>
</v-toolbar>

v-spacer 如圖面上所示,一種 placeholder,佔位用的,它也能在別的 UI 組件中使用。而 v-btn-toggle 其實就是 Button groups,專門用於一次控制一堆 buttons 的選取狀態( 例如 UI 上若有一排 buttons 必須做成可以多選,這若是自己 DIY 是有一點囉唆 )


上一篇
Vuetify:Fashion Header
下一篇
Vuetify:Search Header
系列文
Daily UI : 開發者版30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言